/* stylelint-disable docusaurus/copyright-header */

// Global custom stylesheet for Docusaurus. The 'classic' template bundles Infima. Infima is a CSS
// framework designed for content-centric websites.

// Import
@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,400;0,900;1,900&family=Lato:wght@400;700&display=swap");

// Default Infima variables ////////////////////////////////////////////////////////////////////////
:root {
  --ifm-color-primary: #f9d137;
  --ifm-color-primary-dark: #f8ca19;
  --ifm-color-primary-darker: #f8c70b;
  --ifm-color-primary-darkest: #cfa506;
  --ifm-color-primary-light: #fad855;
  --ifm-color-primary-lighter: #fadb63;
  --ifm-color-primary-lightest: #fce590;
  --ifm-code-font-size: 95%;
  --ifm-link-color: #759DCE;
  //--ifm-background-color: #eee;
  --ifm-code-padding-horizontal: 0.2rem;

  // Base color
  --color-white: #ffffff;
  --color-black: #1c1e21;

  // Project Color
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-white);
  --color-text-tertiary: #999;

  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-black);
  --color-bg-tertiary: #F8F8F8;

  --color-accent: #ffd000;
  --color-accent-lighter: #ffe571;
  --color-accent-darker: #e0ba0f;

  // Dimensions
  --spacing-xs: 15px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 50px;
  --spacing-xl: 100px;
  --spacing-xxl: 175px;
  --spacing-xxxl: 250px;

  --font-primary: "Lato", sans-serif;
  --font-secondary: "Exo", sans-serif;

  --font-size-content-desktop: 1.125rem;
  --font-size-content-mobile: 1rem;

  --font-size-button: 1.25rem;

  /// Grosseur des textes
  --font-size-h1-desktop: 3rem;
  --font-size-h1-mobile: 2.5rem;
  --font-size-h2-desktop: 1.8rem;
  --font-size-h2-mobile: 1.6rem;
  --font-size-h3-desktop: 1.2rem;
  --font-size-h3-mobile: 1.125rem;

  @media screen and(max-width: 500px){
    --font-size-h1-desktop: 3.5rem;
  }

}
  html[data-theme='dark']:root{
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-black);

    --color-bg-primary: var(--color-black);
    --color-bg-secondary: #222428;
    --color-bg-tertiary: #222428;
  }

$breakpoint-xs: 375px;
$breakpoint-sm: 768px;
$breakpoint-md: 1024px;
$breakpoint-lg: 1440px;
$breakpoint-xl: 1920px;

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}


.navbar__brand {

  height: 3rem;

  .navbar__logo {
    height: 3.5rem;
  }

}

.docs-wrapper main .container article .markdown header:nth-child(2) {
  display: none;
}


main article a:link {
  font-weight: var(--ifm-font-weight-bold);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

.header-github-link {
  //margin-right: 0.5em;
  padding: 4px;
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link:before {
  content: '';
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}

html[data-theme=dark] .header-github-link:before {
  filter: invert(1);
}


.header-twitter-link {
  margin-right: 0.5em;
  padding: 4px;
}

.header-twitter-link:hover {
  opacity: 0.6;
}

.header-twitter-link:before {
  content: '';
  width: 25px;
  height: 25px;
  display: flex;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.0' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%23191717' d='M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M17.4,9.3c0,0.1,0,0.2,0,0.4 c0,3.6-2.8,7.8-7.8,7.8c-1.5,0-3-0.4-4.2-1.2c0.2,0,0.4,0,0.7,0c1.2,0,2.4-0.4,3.4-1.2c-1.2,0-2.2-0.8-2.6-1.9 c0.4,0.1,0.8,0.1,1.2,0c-1.3-0.3-2.2-1.4-2.2-2.7v0c0.4,0.2,0.8,0.3,1.3,0.3C5.9,9.9,5.5,8.3,6.2,7.1c1.4,1.7,3.5,2.8,5.7,2.9 c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.5,0.9-2c1.1-1,2.9-1,3.9,0.1c0.6-0.1,1.2-0.3,1.8-0.7c-0.2,0.6-0.6,1.2-1.2,1.5 c0.5-0.1,1.1-0.2,1.6-0.4C18.4,8.4,17.9,8.9,17.4,9.3z'/%3E%3C/svg%3E%0A") no-repeat;
}

html[data-theme=dark] .header-twitter-link:before {
  filter: invert(1);
}



// Styles applicable to "docs" and "api" ///////////////////////////////////////////////////////////
.docs-wrapper article .markdown header:nth-of-type(2) {
  display: none;
}


div[role=banner] {
  background-color: var(--ifm-color-primary);
}


// Styles applicable to menu ///////////////////////////////////////////////////////////////////////
li a.dropdown__link svg {
  display: none;
}

li a.recommended {
  font-weight: bold;
}

li a.dropdown__link.external svg {
  display: inline;
}


// Styles applicable to parameter tables in API ////////////////////////////////////////////////////
.parameter-table-container {
  table {

    display: table;
    width: 100%;

    th:first-of-type {
      width: 18%;
    }

    th:nth-of-type(2) {
      width: 18%;
    }

    th:nth-of-type(3) {
      width: 18%;
    }

    th:nth-of-type(4) {
      width: 46%;
    }
  }
}

/* ==========================================================================
   HEADINGS / ELEMENT
   ========================================================================== */

h1 {
  font-family: var(--font-secondary);
  font-weight: 900;
  font-size: var(--font-size-h1-mobile);

  @media screen and (min-width: $breakpoint-md) {
    font-size: var(--font-size-h1-desktop);
  }
}

h2 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--font-size-h2-mobile);
  margin-top: 2.4rem;

  @media screen and (min-width: $breakpoint-md) {
    font-size: var(--font-size-h2-desktop);
  }
}

h3 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--font-size-h3-mobile);

  @media screen and (min-width: $breakpoint-md) {
    font-size: var(--font-size-h3-desktop);
  }
}


html[data-theme=light] a.cem-logo img {
  filter: invert(1);
}


a.user-icon img {
  border-radius: 50px;
  border: 1px solid black;
  margin: 0.5rem;
}
